<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="unified-search-main" v-loading="loading">
    <div class="title cyberpunk-heading">
      数据统一检索
    </div>
    <div v-if="isBase" class="mt-4 search-item_first">
      <el-input
        style="width: 480px;"
        v-model.trim="keywords"
        size="large"
        round
        placeholder="请输入关键字"
        class="input-with-select"
        clearable
        @keyup.enter="searchRes"
      >
        <template #prepend>
          <el-select v-model="selectType" style="width: 120px;" size="large">
            <el-option label="关键字" value="4" />
            <el-option label="模型名称" value="1" />
            <el-option label="业务系统" value="2" />
            <el-option label="业务场景" value="3" />
          </el-select>
        </template>
        <template #append>
          <el-button type="primary" size="large" style="background: #409eff; color: #fff;" @click="searchRes">检索</el-button> 
        </template>
      </el-input>
      <div class="toggle-type advanced-search" v-if="isBase">
        <el-link type="primary" size="small" @click="isBase = false">高级检索</el-link>
        <el-icon color="#409EFF" :size="16">
          <ArrowDown />
        </el-icon>
      </div>
      <div class="toggle-type advanced-search" v-if="!isBase">
        <el-link type="primary" size="small" @click="isBase = true">普通检索</el-link>
        <el-icon color="#409EFF" :size="16">
          <ArrowUp />
        </el-icon>
      </div>
    </div>
    <div v-if="!isBase" class="exact-search__wrapper">
      <!-- <template > -->
        <div v-for="(item, index) in queryParamsArr" :key="index" class="mt-4 search-item__row">
          <el-input
            style="width: 480px;"
            v-model.trim="item.keywords"
            size="large"
            round
            clearable
            placeholder="请输入关键字"
            class="input-with-select"
          >
            <template #prepend>
              <el-select v-model="item.type" style="width: 120px;" size="large">
                <el-option label="关键字" value="4" />
                <el-option label="模型名称" value="1" />
                <el-option label="业务系统" value="2" />
                <el-option label="业务场景" value="3" />
              </el-select>
            </template>
          </el-input>
          <div v-if="index == 0" class="toggle-type">
            <el-link type="primary" size="small" @click="isBase = true">普通检索</el-link>
            <el-icon color="#409EFF" :size="16">
              <ArrowUp />
            </el-icon>
          </div>
          <div class="add-btn operate-btn" @click="addParam(index)">+</div>
          <div v-if="index > 0" class="reduce-btn operate-btn" @click="removeParam(index)">-</div>
        </div>
      <!-- </template> -->
      <div class="time-range">
        <label class="range-label" for="">时间范围：</label>
        <el-date-picker
          style="width: 360px;"
          v-model="dateRangeCreateTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          size="large"
          range-separator="-"
          start-placeholder="起始时间"
          end-placeholder="截止时间"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
        ></el-date-picker>
      </div>
      <div class="exact-btns">
        <el-button type="primary" size="small" @click="resetParam">重置条件</el-button>
        <el-button type="primary" size="small" @click="searchByOptions">检索</el-button>
      </div>  
    </div>
    <!-- 数据量 -->
    <!-- <div class="data-total">
      <label for="">数据量：</label><span>{{ dataList.length }}</span>
    </div> -->
    <!-- 检索纪录 -->
    <div v-if="searchHistoryList.length > 0" class="search-history">
      <h3>检索记录：</h3>
      <ul class="history-table">
        <li class="history-item" v-for="(item, i) in searchHistoryList" :key="item.id">
          <span >
            {{ item.keyWord ? '关键字："' + item.keyWord + '"、' : '' }}
            {{ item.modelName ? '模型名称："' + item.modelName + '"、' : '' }}
            {{ item.sceneName  ? '业务场景："' + item.sceneName + '"、' : '' }}
            {{ item.systemName ? '业务系统："' + item.systemName + '"、' : '' }}
          </span> 
          <span class="right">
            <a @click="linkToHistoryDetail(item)">重新检索</a>
            <el-icon style="vertical-align: middle;margin-left: 5px;" class="close-icon" color="#000" :size="12" @click="removeHisItem(item, i)">
            <Close />
          </el-icon>
          </span>
          
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup name="UnifiedEntry">
import { getUnifiedSearchData, getHistorySearchRes, deleteHistorySearchRes } from '@/api/unifiedSearch';
const emit = defineEmits(['handleEvent']);
const selectType = ref('4');
const dataNum = ref(0);
const isBase = ref(true);
const keywords = ref('');
const loading = ref(false);
const queryParamsArr = ref([{
  type: '4',
  keywords: ''
}]);
const dataList = ref([]);
const modelList = ref([]);
const sceneList = ref([]);
const systemList = ref([]);
const dataBaseList = ref([]);
const searchHistoryList = ref([]);
const dateRangeCreateTime = ref([]);
const addParam = (index) => {
  queryParamsArr.value.splice(index+1, 0, {
    type: '4',
    keywords: ''
  })
}
const selectTypeMap = {
  '1': 'modelName',
  '2': 'systemName',
  '3': 'sceneName',
  '4': 'keyWord'
}
const linkToHistoryDetail = (row) => {
  const { systemName, sceneName, modelName, keyWord, queryStartTime, queryEndTime } = row;
  loading.value = true;
  let params = {
    'modelName': modelName || '',
    'systemName': systemName || '',
    'sceneName': sceneName || '',
    'keyWord': keyWord || '',
    startTime: queryStartTime,
    endTime: queryEndTime,
    'source': ''
  }
  commonSearch(params);
}
const removeParam = (index) => {
  queryParamsArr.value.splice(index, 1)
}
const searchRes = () => {
  if (!keywords.value) {
    ElMessage({ showClose: true, message: '请先输入筛选内容', type: 'error' });
    return;
  }
  loading.value = true;
  let params = {
    'modelName': '',
    'systemName': '',
    'sceneName': '',
    'keyWord': '',
    'source': 'unifiedSearch'
  }
  params[selectTypeMap[selectType.value]] = keywords.value
  commonSearch(params);
}
// 通用请求
const commonSearch = (params) => {
  getUnifiedSearchData(params).then((res) => {
    if (res.data) {
      loading.value = false;
      dataList.value = res.data.dataList;
      modelList.value = res.data.modelList;
      sceneList.value = res.data.sceneList || [];
      systemList.value = res.data.systemList || [];
      dataBaseList.value = res.data.dataBaseList || [];
      if (dataList.value.length == 0 
        && modelList.value.length == 0 
        && sceneList.value.length == 0 
        && systemList.value.length == 0
        && dataBaseList.value.length == 0) {
          ElMessage({ showClose: true, message: '暂无匹配数据！', type: 'info' });
          return;
        }
      emit('handleEvent', {
        component: 'List',
        dataList: dataList.value,
        modelList: modelList.value,
        sceneList: sceneList.value,
        systemList: systemList.value,
        dataBaseList: dataBaseList.value,
        params: params
      })
    }
  })
  .catch(() => {
    loading.value = false;
  }).finally(() => {
    loading.value = false;
  });
}
// 历史记录跳转
const resetParam = () => {
  queryParamsArr.value = [{
    type: '1',
    keywords: ''
  }]
  dateRangeCreateTime.value = [];
}
// 多条件筛选
const searchByOptions = () => {
  let modelName = [], systemName = [], sceneName = [], keyWord = [];
  queryParamsArr.value.forEach(item => {
    if (item.type == '1' && item.keywords) {
      modelName.push(item.keywords);
    } else if (item.type == '2' && item.keywords) {
      systemName.push(item.keywords);
    } else if (item.type == '3' && item.keywords) {
      sceneName.push(item.keywords);
    } else if (item.type == '4' && item.keywords) {
      keyWord.push(item.keywords);
    }
  })
  loading.value = true;
  let params = {
    'modelName': modelName.join(',') || '',
    'systemName': systemName.join(',') || '',
    'sceneName': sceneName.join(',') || '',
    'keyWord': keyWord.join(',') || '',
    'source': 'unifiedSearch',
    startTime: dateRangeCreateTime.value && dateRangeCreateTime.value.length > 1 && dateRangeCreateTime.value[0] || '',
    endTime: dateRangeCreateTime.value && dateRangeCreateTime.value.length > 1 && dateRangeCreateTime.value[1] || ''
  }
  commonSearch(params);
}
// 历史纪录
const getHistory = () => {
  getHistorySearchRes().then(res => {
    if(res.data) searchHistoryList.value = res.data;
  })
}
const removeHisItem = (item, i) => {
  deleteHistorySearchRes(item.id).then(res => {
    if (res) {
      searchHistoryList.value.splice(i, 1)
      // getHistory();
    }
  })
}
onMounted(() => {
  getHistory();
})
</script>
<style lang="scss" scoped>
@import "./specialCss.scss";
.unified-search-main {
  padding: 10px;
  // width: 100%;
  // height: calc(100vh - 184px);
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // justify-content: center;
  margin: auto;
  width: 650px;
  font-size: 12px;
  .time-range {
    margin-top: 20px;
    .range-label {
      padding: 0 20px;
      font-size: 16px;
      font-weight: 500;
    }
  }
  .exact-btns {
    display: flex;
    justify-content: center;
    padding: 20px 0 ;
  }
  .data-sum {
    padding: 10px;
    font-size: 16px;
    label {
      font-weight: 500; 
    }
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    font-size: 22px;
    font-weight: 600;
    margin-top: 20px;
    padding-left: 40px;
    letter-spacing: 1px;
    margin-block: 50px;
    img {
      width: 38px;
      height: 50px;
      margin-left: -60px;
      margin-right: 10px;
    }
    .tips {
      color: #409eff;
    }
  }
  .mark {
    font-size: 13px;
    color: #909399;
    padding: 0;
    margin: 5px 0;
  }
  .option_btn {
    margin-top: 20px;
  }
  .search-item__row {
    display: flex;
    align-items: center;
    .operate-btn {
      width: 20px;
      height: 20px;
      margin-left:10px;
      line-height: 20px;
      text-align: center;
      font-size: 20px;
      border-radius: 50%;
      border: 1px solid #409EFF;
      color: #409EFF;
      cursor: pointer;
    }
  }
  .search-item_first {
    display: flex;
    align-items: center;
    
  }
  .toggle-type {
    margin-left: 10px;
    display: flex;
    align-items: center;
  }
  .data-total {
    margin-top: 10px;
  }
  .search-history {
    // margin-top: 10px;
    // h3 {
    //   padding: 0;
    //   margin: 0;
    //   // font-weight: 600;
    //   font-size: 14px;
    // }
    // ul,li{
    //   list-style: none;
    //   padding: 0;
    //   margin: 0;
    // }
    // li { 
    //   display: inline-block;
    //   line-height: 28px;
    //   height: 28px;
    //   margin-right: 30px;
    //   font-size: 14px;
    //   color: #999;
    //   cursor: pointer;
    // }
      background: white;
      border-radius: 8px;
      padding: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);

    .history-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      padding: 0;
    }

    .history-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 10px;
      border-bottom: 1px solid #f1f3f5;
      cursor: pointer;
      justify-content: space-between;
      .right{
        a{
          color: #409eff;
          cursor: pointer;
        }
      }
    }

    /* 标签样式 */
    .filter-tag {
      display: inline-flex;
      align-items: center;
      padding: 0.3rem 0.8rem;
      background: #f1f3f5;
      border-radius: 20px;
      font-size: 0.9rem;
      margin: 0.2rem;
    }

    .filter-tag::after {
      content: "×";
      margin-left: 0.5rem;
      color: #868e96;
      cursor: pointer;
      transition: color 0.2s;
    }

    .filter-tag:hover::after {
      color: #fa5252;
    }
  }
}
</style>
